<template>
  <el-container class="el-contain">
      <el-aside class="el-aside" >    
        <div class="scrollable-page" >
        <el-menu
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#409EFF"
          :router="true"
          :default-active="$route.path"
        >
          <el-menu-item :index="'/'+menu.id" v-for="menu in menulist" :key="menu.id">
            <template #title>
              <span>{{ menu.id }}{{ " "+menu.authName}}</span>
            </template>
          </el-menu-item>
        </el-menu>
        </div>
      </el-aside>
    <el-main class="el-main">
      <router-view></router-view>
      </el-main>
  </el-container>
</template>
<script>
import { ref } from "vue";
export default {
  name: "MeNu",
  data() {
    return {};
  },
  setup() {
    let menulist = ref(null);
    menulist.value = [
      {
        id: 1,
        authName: "法人基础库备案基本信息",
      },
      {
        id: 2,
        authName: "法人基础库变更信息",
      },
      {
        id: 3,
        authName: "法人基础库撤销信息",
      },
      {
        id: 4,
        authName: "法人基础库吊销信息",
      },
      {
        id: 5,
        authName: "法人基础库分支信息",
      },
      {
        id: 6,
        authName: "法人基础库个体工商户基本信息",
      },
      {
        id: 7,
        authName: "法人基础库股东冻结被执行人信息",
      },
      {
        id: 8,
        authName: "法人基础库股东名录",
      },
      {
        id: 9,
        authName: "法人基础库股权出质变更信息",
      },
      {
        id: 10,
        authName: "法人基础库股权出质信息",
      },
      {
        id: 11,
        authName: "法人基础库股权冻结信息",
      },
      {
        id: 12,
        authName: "法人基础库基本登记信息",
      },
      {
        id: 13,
        authName: "法人基础库隶属关系",
      },
      {
        id: 14,
        authName: "法人基础库企业和个体工商户基本信息",
      },
      {
        id: 15,
        authName: "法人基础库企业基础信息",
      },
      {
        id: 16,
        authName: "法人基础库欠税处理信息",
      },
      {
        id: 17,
        authName: "法人基础库清税证明",
      },
      {
        id: 18,
        authName: "法人基础库商标信息",
      },
      {
        id: 19,
        authName: "法人基础库许可变更记录",
      },
      {
        id: 20,
        authName: "法人基础库许可基本信息",
      },
      {
        id: 21,
        authName: "法人基础库主要人员",
      },
      {
        id: 22,
        authName: "法人基础库注销税务登记信息",
      },
      {
        id: 23,
        authName: "-法人基础库注销信息",
      },
      {
        id: 24,
        authName: "法人基础库资质基本信息",
      },
    ];
    return {
      menulist,
    };
  },
};
</script>
<style lang="scss" scoped>
.scrollable-page{
  height: 100vh; 
  overflow-y: auto;
}
.el-aside {
  background-color: #7d8e98;
  transition: width 0.15s;
  -webkit-transition: width 0.2s;
  -moz-transition: width 0.2s;
  -o-transition: width 0.2s;
  min-height: 760px;
  min-width: 300px;
}
.el-aside::-webkit-scrollbar {
  display: none;
  max-width: fit-content;
}
.el-main {
  padding-top:2em;
  overflow:hidden;
  background-color: white;
  width: 100%;
  --el-main-padding: none;
}
.el-contain {
  height: 100%;
  padding-top: 0;
  display: flex;
}
</style>